<template>
    <div class="memorials">
        <div class="memorials_tap">
            <div class="memorials_tap_title">
                <span>最新祭奠</span>
            </div>
            <div class="memorials_tap_typeList">
                <div class="memorials_tap_typeList_line" v-for="item in list" :key="item.id" @click="goToMemorialList(item.id, item.title)">
                    <span class="text">{{ item.title }}</span>
                    <span style="margin: 0 5px;">|</span>
                </div>
                <span class="text" @click="goToMemorialList(0, '')">更多</span>
            </div>
        </div>
        <el-divider />
        <div class="memorial-content">
            <div class="memorial-card"  v-for="(memorial, index) in dataList" :key="index" @click="handleVisit(memorial.id)">
                <img :src="memorial.avatar" :alt="memorial.name" />
                <h4>{{ memorial.name }}</h4>
            </div>
        </div>
        <el-divider />
        <div class="memorials_tap">
            <div class="memorials_tap_title">
                <span>最新团体</span>
            </div>
            <div class="memorials_tap_typeList">
                <span class="text" @click="goToFamilyList()">更多</span>
            </div>
        </div>
        <div class="memorial-content">
            <div class="memorial-card"  v-for="(family, index) in familyList" :key="index" @click="handleVisitFamily(family)">
                <img :src="family?.logo" :alt="family?.name" />
                <h4>{{ family?.name }}</h4>
            </div>
        </div>
        
        <!-- <el-row :gutter="20">
            <el-col :span="4" v-for="(memorial, index) in dataList" :key="index">
                <div class="memorial-card" @click="handleVisit(memorial.id)">
                    <img :src="memorial.avatar" :alt="memorial.name" />
                    <h4>{{ memorial.name }}</h4>
                </div>
            </el-col>
        </el-row> -->
    </div>  
</template>

<script setup lang="ts">
    import { ref, defineProps } from 'vue'
    import { useRouter } from 'vue-router'
    import { apiMyMuRelation } from '@/api/graveyard'
    const router = useRouter()
    const props = defineProps({
        dataList: {
            type: Array<any>,
            default: () => []
        },
        familyList: {
            type: Array<any>,
            default: () => []
        }
    })
    // 墓地跳转
    const handleVisit = (id: string | number) => {
        // router.push(`/muDetail?id=${id}`)
        const targetRouteLocationForButton = ref<any>({})
        let obj = props.dataList.find((item: any) => item.id == id)
        if(obj.template_id == 1){
            targetRouteLocationForButton.value = {
                name: 'muDetail',
                query: { id: id },
            };
        }else{
            targetRouteLocationForButton.value = {
                name: 'ordinaryMuDetail',
                query: { id: id },
            };
        }
        
        const resolvedRouteForButton = router.resolve(targetRouteLocationForButton.value);
        console.log(resolvedRouteForButton)
        // 使用 window.open 打开新标签页
        window.open(resolvedRouteForButton.href, '_blank');
    }
    // 团体跳转
    const handleVisitFamily = (item: any) => {
        // router.push(`/muDetail?id=${id}`)
        let targetRouteLocationForButton = {}
        if(item.type == 1){
            targetRouteLocationForButton = {
                name: item.template_id == 0 ? 'familyHome' : 'familyHomeTemplate',
                query: { id: item.id },
            };
        }else{
            targetRouteLocationForButton = {
                name: item.template_id == 0 ? 'cemeteryHome' : 'cemeteryHomeTemplate',
                query: { id: item.id },
            };
        }
        const resolvedRouteForButton = router.resolve(targetRouteLocationForButton);
        console.log(resolvedRouteForButton)
        // 使用 window.open 打开新标签页
        window.open(resolvedRouteForButton.href, '_blank');
    }
    const goToMemorialList = (id: number, name: string) => {
        if(id){
            let obj = dataList.value
            router.push('/memorialList?id=' + id + '&title=' + name)
        }else{
            router.push('/memorialList')
        }
    }
    const goToFamilyList = () => {
        router.push('/cemeteryList')
    }

    const list = ref<Array<any>>([])
    const getApiMyMuRelation = async () => {
        let obj = await apiMyMuRelation()
        console.log(obj)
        list.value = obj.filter((item: any, index: number) => index < 4)
    }

    onMounted(()=>{
        getApiMyMuRelation()
    })
</script>

<style scoped>
    .memorials {
        width: 100%;
        height: 100%;
    }
    .memorials_tap{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .memorials_tap_title{
        font-size: 20px;
        font-weight: bold;
    }
    .memorials_tap_typeList{
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .memorials_tap_typeList .text{
        color: #7E6F65;
        cursor: pointer;
    }
    .memorials_tap_typeList .text:hover{
        color: #F16C20;
    }
    .memorial-card{
        flex: 1;
        /* width: 14.285%; */
        height: 130px;
        margin-top: 10px;
        display: flex;
        align-items: center;
        flex-flow: column;
        justify-content: center;
    }
    .memorial-card img{
        width: 84px;
        height: 90px;
        padding: 4px;
        border: #DCD7C2 1px solid;
        background: #FBFAF4;
    }
    
    .memorial-content{
        width: 100%;
        /* display: flex; */
        /* flex-wrap: wrap; */
        /* align-items: flex-start; */
        /* justify-content: flex-start; */
        display: grid;
        grid-template-columns: repeat(7, 1fr);
    }
</style>